/**
 * 实时数据管理初始化
 */
var VpnRealTimeData = {
    table: null,
    myChart: null
};

/**
 * 初始化表格的列
 */
VpnRealTimeData.initColumn = function () {
    return [[
        {field: 'hTime', title: '时间', fixed: 'left',
            align: 'center',templet:function (d) {
                return d.hTime+":00";
            }}
        ,{field: 'regCount', title: '注册用户数',align: 'center',templet:function (item) {
                if(item.regCount == null || item.regCount == ''){
                    return '0'
                }
                return item.regCount
            } }
        ,{field: 'onlineCount', title: '在线用户数',align: 'center',width: 200 ,templet:function (item) {
                if(item.onlineCount == null || item.onlineCount == ''){
                    return '0'
                }
                return item.onlineCount
            }}
        ,{field: 'totalOnlineTime', title: '在线时长(小时)',
            align: 'center' ,width: 200 ,templet:function (item) {
                if(item.totalOnlineTime == '0' || item.totalOnlineTime == ''){
                    return '0';
                }
                else{
                    return formatNumber(item.totalOnlineTime,4,false,false);
                }
            }}
        ,{field: 'payCount', title: '新增付费用户数',align: 'center' ,width: 260 ,templet:function (item) {
                if(item.payCount == null || item.payCount == ''){
                    return '0'
                }
                return item.payCount
            }}
        ,{field: 'totalRegCount', title: '新增用户付费率',
            align: 'center' ,width:260,templet:function (item) {
                if(item.totalRegCount == '0'){
                    return "0%";
                }
                else {
                    return formatNumber(item.payCount / item.totalRegCount,2,false,true);
                }
            }}
    ]]
};

VpnRealTimeData.totalRealTimeInfo = function(){
    var ajax = new $ax(Feng.ctxPath + "/vpnRealTimeData/todayTotalRealtimeData",function (data) {
        var regCount = data.regCount;
        var yesterdayRegCount = data.yesterdayRegCount;

        var regObj = document.getElementById('regIncreaseRatio');
        var onlineObj = document.getElementById('onlineIncreaseRatio');
        var timeObj = document.getElementById('onlineTimeIncreaseRatio');
        var payObj = document.getElementById('paymentIncreaseRatio');
        var normal = "white";
        var increase = "black";
        var decrease = "red";
        $("#regCount").text(regCount);
        regObj.style.color = normal;
        if(regCount == '0'){
            $("#regIncreaseRatio").text(0+"%");
        }
        else if(yesterdayRegCount == '0'){
            $("#regIncreaseRatio").text(100+"%");
            regObj.style.color = increase;
        }
        else{
            if((regCount - yesterdayRegCount) < 0){
                regObj.style.color = decrease;
            }
            else if((regCount - yesterdayRegCount) > 0){
                regObj.style.color = increase;
            }
            $("#regIncreaseRatio").text((((regCount - yesterdayRegCount)/yesterdayRegCount) * 100).toFixed(2)+"%");
        }

        var onlineCount = data.onlineCount;
        var yesterdayOnlineCount = data.yesterdayOnlineCount;

        $("#onlineCount").text(onlineCount);
        onlineObj.style.color = normal;

        if(onlineCount == '0'){
            $("#onlineIncreaseRatio").text(0+"%");
        }
        else if(yesterdayOnlineCount == '0' || yesterdayOnlineCount == ''){
            $("#onlineIncreaseRatio").text(100+"%");
            onlineObj.style.color = increase;
        }
        else{
            $("#onlineIncreaseRatio").text((((onlineCount - yesterdayOnlineCount)/yesterdayOnlineCount) * 100).toFixed(2)+"%");

            if((onlineCount - yesterdayOnlineCount) < 0){
                onlineObj.style.color = decrease;
            }
            else if((onlineCount - yesterdayOnlineCount) > 0){
                onlineObj.style.color = increase;
            }
        }

        var onlineTime = data.todayOnlineTime;
        var yesterdayOnlineTime = data.yesterdayOnlineTime;

        $("#onlineTime").text(onlineTime);
        timeObj.style.color = normal;

        if(onlineTime == 0 || onlineTime == '0'){
            $("#onlineTimeIncreaseRatio").text(0+"%");
        }
        else if(yesterdayOnlineTime == '0' || yesterdayOnlineTime == 0){
            $("#onlineTimeIncreaseRatio").text(100+"%");
            timeObj.style.color = increase;
        }
        else{
            $("#onlineTimeIncreaseRatio").text((((onlineTime - yesterdayOnlineTime)/yesterdayOnlineTime) * 100).toFixed(2)+"%");

            if((onlineTime - yesterdayOnlineTime) < 0){
                timeObj.style.color = decrease;
            }
            else if((onlineTime - yesterdayOnlineTime) > 0){
                timeObj.style.color = increase;
            }
        }

        var paymentCount = data.paymentCount;
        var yesterdayPaymentCount = data.yesterdayPaymentCount;

        $("#paymentCount").text(paymentCount);
        payObj.style.color = normal;
        if(paymentCount == '0'){
            $("#paymentIncreaseRatio").text(0+"%");
        }
        else if(yesterdayPaymentCount == '0'){
            $("#paymentIncreaseRatio").text(100+"%");
            payObj.style.color = increase;
        }
        else{
            $("#paymentIncreaseRatio").text((((paymentCount - yesterdayPaymentCount)/yesterdayPaymentCount)*100).toFixed(2)+"%");

            if((paymentCount - yesterdayPaymentCount) < 0){
                payObj.style.color = decrease;
            }
            else if((paymentCount - yesterdayPaymentCount) > 0){
                payObj.style.color = increase;
            }
        }

    }, function (data) {
        Feng.error("获取实时数据失败!" + data.responseJSON.message + "!");
    });
    ajax.start();
};


VpnRealTimeData.realTimeInfo = function(type){
    var ajax = new $ax(Feng.ctxPath + "/vpnRealTimeData/echartsRealTimeInfo",function (data) {
        var options = VpnRealTimeData.options();
        if(data.length > 0){
            options.series[0] = data[0];
            if(data[1] != null){
                options.series[1] = data[1];
            }else{
                options.series[1] = [];
            }
            if(data[2] != null){
                options.series[2] = data[2];
            }else{
                options.series[2] = [];
            }
            if (data[3] != null){
                options.series[3] = data[3];
            }else{
                options.series[3] = [];
            }
        }
        VpnRealTimeData.myChart.setOption(options);
    }, function (data) {
        Feng.error("获取实时数据失败!" + data.responseJSON.message + "!");
    });
    ajax.set("type",type)
    ajax.start();
};




VpnRealTimeData.tableList = function(){
    layui.use(["table","element"],function () {
        var table = layui.table;
        var element = layui.element;

        element.on("tab(tab-nav)",function (data) {
            VpnRealTimeData.realTimeInfo(data.index + 1);
        });

        VpnRealTimeData.table = table;

        table.render({
            elem: "#detailData",
            url: Feng.ctxPath +"/vpnRealTimeData/detailOfTodayRealTimeInfo",
            cellMinWidth: 120,
            title: "详细数据",
            page: false,
            cols: VpnRealTimeData.initColumn(),
            parseData: function(res){
                console.log(res);
                return{
                    "code":0,
                    "msg":"获取成功",
                    "count":res.length,
                    "data": res
                }
            },
            text: {
                none: '暂无相关数据'
            },
            id: "detailData"
        });
    });
};

VpnRealTimeData.options = function(){
    return {
        title: {
            text: '趋势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['今天', '昨天', '7天前', '30天前']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '00:00', '', '02:00', '', '04:00', '', '06:00', '', '08:00', '', '10:00', '', '12:00'
                , '','14:00', '', '16:00', '', '18:00', '', '20:00', '', '22:00', ''
            ]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '今天',
                type: 'line',
                data: [0]
            },
            {
                name: '昨天',
                type: 'line',
                data: [0]
            },
            {
                name: '7天前',
                type: 'line',
                data: [0]
            },
            {
                name: '30天前',
                type: 'line',
                data: [0]
            }
        ]
    };
};

$(function () {
    setTimeout(function () {
        VpnRealTimeData.totalRealTimeInfo();
    });

    setTimeout(function () {
        VpnRealTimeData.tableList();
    });

    VpnRealTimeData.myChart = echarts.init(document.getElementById("mcharts"));

    setTimeout(function () {
        VpnRealTimeData.realTimeInfo(1);
    });

});
